<template>
  <section>

    <div id="map"></div>

  </section>
</template>

<script>
import Cesium from "cesium/Cesium";

import widgets from "cesium/Widgets/widgets.css";

export default {
  // mounted() {
  // 	var viewer = new Cesium.Viewer('map')
  // },
  mounted () {
    let setHomeBtn = function(viewer) {
      // 设置homebutton 初始位置
      let initialPosition = new Cesium.Cartesian3.fromDegrees(
        111.244834,
        30.725514,
        10000
      );
      let initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
        0,
        -40,
        0
      );
      let homeCameraView = {
        destination: initialPosition,
        orientation: {
          heading: initialOrientation.heading,
          pitch: initialOrientation.pitch,
          roll: initialOrientation.roll
        }
      };

      // Set the initial view
      viewer.scene.camera.setView(homeCameraView);
      // Add some camera flight animation options
      homeCameraView.duration = 2.0;
      homeCameraView.maximumHeight = 2000;
      homeCameraView.pitchAdjustHeight = 2000;
      homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
      // Override the default home button
      viewer.homeButton.viewModel.command.beforeExecute.addEventListener(
        function(e) {
          e.cancel = true;
          viewer.scene.camera.flyTo(homeCameraView);
        }
      );
    };

    let viewer = new Cesium.Viewer("map", {
      animation: true, //是否显示动画控件
      homeButton: true, //是否显示home键
      //geocoder:false,         //是否显示地名查找控件        如果设置为true，则无法查询
      baseLayerPicker: true, //是否显示图层选择控件
      timeline: false, //是否显示时间线控件
      fullscreenButton: true, //是否全屏显示
      scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      infoBox: true, //是否显示点击要素之后显示的信息
      sceneModePicker: false, //是否显示投影方式控件  三维/二维
      navigationInstructionsInitiallyVisible: false,
      navigationHelpButton: false, //是否显示帮助信息控件
      selectionIndicator: false //是否显示指示器组件
    });

    viewer.imageryLayers.removeAll();
    setHomeBtn(viewer);
    //SuperMap的POI服务来替代    中文检索          高德和谷歌检索收费，这里采用supermap没有什么意义
    // var geocoder = viewer.geocoder.viewModel;
    // geocoder._searchCommand = Cesium.createCommand(function() {
    //   if (geocoder.isSearchInProgress) {
    //     cancelGeocode(geocoder);
    //   } else {
    //     geocoder(geocoder);
    //   }
    // });

    //添加cesium地形图层
    // var terrainLayer = new Cesium.CesiumTerrainProvider({
    //   url: "https://www.supermapol.com/iserver/services/3D-stk_terrain/rest/realspace/datas/info/data/path/" // 默认立体地表/
    //   // 请求照明
    //   // requestVertexNormals: true,
    //   // 请求水波纹效果
    //   // requestWaterMask: true
    // });

    let terrainLayer = new Cesium.CesiumTerrainProvider({
      // url: "http://localhost:8080/terrain_tiles" // 默认立体地表/
      url: "/api/terrain_tiles"
      // 请求照明
      // requestVertexNormals: true,
      // 请求水波纹效果
      // requestWaterMask: true
    });

    viewer.terrainProvider = terrainLayer;
    // let GoogleMap = new Cesium.ImageryLayer(
    //   new Cesium.UrlTemplateImageryProvider({
    //     url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" //谷歌影像
    //   })
    // );

    // viewer.imageryLayers.add(GoogleMap);
    viewer._cesiumWidget._creditContainer.style.display = "none"; //	去除版权信息
    // ImageLayer
    viewer.imageryLayers.addImageryProvider(
      new Cesium.ArcGisMapServerImageryProvider({
        url:
          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
      })
    );
  }
};
</script>

<style scoped>
#map {
  height: 100%;
  width: 100%;
}
</style>
